<template>
	<view class="content">

		<my-top :userName="userName" :topName="topName"></my-top>
		<view class="indexContent">

			<view :class="[time?'leaveNav':'dormitoryNav']">
				<view style="font-weight: 800;font-size: 39rpx;">班级详情
					<view class="leaveLine"></view>
				</view>
				<button class="leaveBtn" v-if="time" @click="leaveBtnFun()">修改</button>
			</view>
			<view>

				<view class="displayStudentInfo">

					<view style="color:#8F8F94;margin-bottom:20rpx;">
						班级：{{obj.className}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						班主任：{{obj.teacherName}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;" @click="callFun(detailList.teacherPhone)">
						联系方式：{{obj.teacherPhone}}
					</view>

					<view class="leaveNav1" v-if="dutyType!=4">
						<view style="font-weight: 800;font-size: 39rpx;">违纪情况
							<view class="violationLine"></view>
						</view>
					</view>
					<!-- <view 
						style="width:600rpx;color:#666;margin-bottom:20rpx;font-weight: 800;display: flex;justify-content: space-between;align-content: space-between;">
						<view> 违纪情况</view>
						<view style="color:#8F8F94;margin-top:10rpx;font-size: 24rpx;font-weight: 0;">
							{{detailList.patrolTime}}
						</view>
					</view> -->
					<!-- <view v-else
						style="width:600rpx;color:#666;margin-bottom:20rpx;font-weight: 800;display: flex;justify-content: space-between;align-content: space-between;">
						<view> 午休情况</view>
						<view style="color:#8F8F94;margin-top:10rpx;font-size: 24rpx;font-weight: 0;">
							{{detailList.patrolTime}}
						</view>
					</view> -->
					<view class="leaveNav1" v-else>
						<view style="font-weight: 800;font-size: 39rpx;">自习情况
							<view class="violationLine"></view>
						</view>
					</view>
					<view style="color:#8F8F94;margin-top:10rpx;margin-bottom:20rpx;font-weight: 0;">
						记录时间：{{obj.patrolTime }}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						应到人数：{{ total}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						实到人数：{{ JSON.parse(obj.classPatrolJson).actArriveNum}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						请假人数：{{ leave}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						是否已通知班主任：{{obj.isInformCharge | isInformCharge}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						违纪情况登记人：{{obj.createBy}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						详细信息：{{obj.describeTxt}}
					</view>

					<img v-if="img" :src="img" class="imgSty"></img>

					<!-- {{imgList}} -->
					<view style="display: flex;justify-content:flex-start;width:500rpx" v-if='imgList.length>0'>
						<view v-for="(item,index) in imgList">
							<view v-if="time" class="del" @click.stop="delFun(index,2)">×</view>
							<image :class="[{'imgDel':time}]"
								style="margin-right:10rpx;border-radius: 10rpx;width:190rpx;height:190rpx" :src="item">
							</image>
						</view>
						<view v-if="time" style="display: flex;justify-content:flex-start;">
							<view v-for="(item,index) in baseFileList" :key="index">
								<!-- @click.stop="viewImg()" -->
								<view v-if="time&&baseFileList.length!=0" class="del" @click.stop="delFun(index,1)">×
								</view>
								<image :class="[{'imgDel':time&&baseFileList.length!=0}]"
									style="margin-right:10rpx;border-radius: 10rpx;width:190rpx;height:190rpx"
									:src="item">
								</image>
							</view>
							<view v-if="baseArr.length<3&&num<3">
								<view
									style="margin-right: 10rpx;color:#808080; position: relative;top:50rpx;left:66rpx;font-size: 90rpx;font-weight: bolder;">
									+</view>
								<image @click.stop="chooseImage"
									style=" margin-top:-100rpx; border: #808080 solid 1rpx; border-radius: 10rpx;width:190rpx;height:190rpx"
									mode="+"></image>
							</view>
						</view>
					</view>
					<view v-else>
						<view v-if="time" style="display: flex;justify-content:flex-start;">
							<view v-for="(item,index) in baseFileList" :key="index">
								<!--  @click.stop="viewImg()" -->
								<view v-if="time&&baseFileList.length!=0" class="del" @click.stop="delFun(index,1)">×
								</view>
								<image :class="[{'imgDel':time&&baseFileList.length!=0}]"
									style="margin-right:10rpx;border-radius: 10rpx;width:190rpx;height:190rpx"
									:src="item">
								</image>
							</view>
							<view v-if="baseArr.length<3&&num<3">
								<view
									style="margin-right: 10rpx;color:#808080; position: relative;top:50rpx;left:66rpx;font-size: 90rpx;font-weight: bolder;">
									+</view>
								<image @click.stop="chooseImage"
									style=" margin-top:-100rpx;margin-left:0rpx; border: #808080 solid 1rpx; border-radius: 10rpx;width:190rpx;height:190rpx"
									mode="+"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="attendanceArr" :bottomName="bottomName"></my-bottom> -->

		<!-- <bottom-com :topName="topName" :bottomArr="attendanceArr" :bottomName="bottomName"></bottom-com> -->
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/index.js'
	import topCom from '@/pages/component/topCom.vue'
	import bottomCom from '@/pages/component/bottom.vue'
	import * as imageConversion from 'image-conversion'
	export default {

		data() {
			return {
				obj: {},
				img: '',
				arr1: [],
				arr2: [],
				baseArr: [],
				time: false,
				bottomName: 'home',
				detailList: {
					classPatrolJson: {
						sleep: 0,
						withoutCard: 0,
					}
				},
				userName: '',
				imgShowList: [],
				topName: '晚自习详情',
				showFresh: 'true',
				punishDesc: '',
				dvType: "",

				attendanceArr: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "违纪",
						path: '/pages_main/dutyCheckWorkAttendance/dutySchoolList'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages_main/dutyCheckWorkAttendance/dutySchoolList'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages_main/dutyCheckWorkAttendance/dutySchoolList'
					}
				],

				id: 0,
				dutyType: '',
				baseFileList: [],
				imgList: [],
				fileList: [],
				num: 0,
				total: 0,
				leave: 0
			}
		},
		filters: {
			isInformCharge(data) {
				if (data == 0) {
					return "未通知"
				} else if (data == 1) {
					return "已通知"
				}
			},
			//过滤器
			formDataDate(data) {
				// var date = new Date(data);
				alert(data)
				// var year = date.getFullYear();
				// var month = date.getMonth() + 1;
				// var day = date.getDate();
				// var hour = date.getHours();
				// var min = date.getMinutes();
				// var sec = date.getSeconds();
				// return year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec;
			}

		},
		onShow() {
			this.userName = uni.getStorageSync("loginName")
		},
		mounted() {
			this.bottomSkip()
		},
		components: {
			topCom,
			bottomCom
		},
		onLoad(options) {
			var str = options.obj;

			var obj = JSON.parse(str);
			this.obj = obj;
			console.log(this.obj);
			if (this.obj.patrolImg) {
				this.img =
					` ${this.$baseAppUrl}common/downloadFileImg?filename=${this.obj.patrolImg}`
			}

			uni.request({
				url: uni.url + "Class/getBoardingStuCountByClassId?classId=" + obj.classId,
				success: res => {
					console.log(res);
					this.total = res.data.data;

				}
			})

			uni.request({
				url: uni.url + "Class/getLeaveStuCountByClassId?classId=" + obj.classId,
				success: res => {
					console.log(res);
					this.leave = res.data.data;
				}
			})
		},
		methods: {
			delFun(index, id) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确认删除图片？',
					success: function(res) {
						if (res.confirm) {
							that.baseArr = []
							that.imgShowList.splice(index, 1)
							console.log(id, index, "list")
							if (id == 2) {
								that.imgList.splice(index, 1)
								that.baseArr.push(that.imgList)
								console.log(that.imgList, "list")
							} else {
								that.baseFileList.splice(index, 1)
								that.baseArr.push(that.baseFileList)
								console.log(that.baseFileList)
							}
							that.num--
							// that.num = that.imgShowList.length +that.baseFileList.length
							that.$forceUpdate()

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			bottomSkip() {
				for (var i = 0; i < this.attendanceArr.length; i++) {
					if (this.dutyType == 1) {
						this.attendanceArr[i].path = '/pages_main/dutyCheckWorkAttendance/dutySchoolList'
					} else if (this.dutyType == 2) {
						this.attendanceArr[i].path = '/pages_main/dutyCheckWorkAttendance/dutyAfterClassList'
					} else if (this.dutyType == 3) {
						this.attendanceArr[i].path = '/pages_main/dutyCheckWorkAttendance/dutyClassList'
					} else {
						this.attendanceArr[i].path = '/pages_main/dutyCheckWorkAttendance/dutyMoonAttendanceStatus'
					}

				}

			},
			viewImg() {
				var that = this
				this.baseArr.push(this.baseFileList)
				// alert(this.baseArr.length)
				// this.num = this.imgList.length +this.baseFileList.length
				console.log(this.baseFileList, "file")
				// 预览图片
				uni.previewImage({
					urls: that.fileList,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg, "msg");
						}
					},
					success: () => {

					},
				});

				that.$forceUpdate()
			},
			viewImg1() {
				var that = this
				alert(this.baseArr.length)
				this.baseArr.push(this.baseFileList)
				// this.num = this.imgList.length +this.baseFileList.length
				// 预览图片
				uni.previewImage({
					urls: that.imgList,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							uni.hideLoading()
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},

						fail: function(err) {
							console.log(err.errMsg, "msg");
						}
					},
					success: () => {


					},
				});


			},
			// base64转换成二进制
			convertBase64UrlToBlob(base64) {
				let urlData = base64.dataURL
				let type = base64.type
				let bytes = null
				if (urlData.split(',').length > 1) { //是否带前缀
					bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
				} else {
					bytes = window.atob(urlData)
				}
				// 处理异常,将ascii码小于0的转换为大于0
				let ab = new ArrayBuffer(bytes.length)
				let ia = new Uint8Array(ab)
				for (let i = 0; i < bytes.length; i++) {
					ia[i] = bytes.charCodeAt(i)
				}
				return new Blob([ab], {
					type: type
				})
			},
			chooseImage() {
				this.num = this.imgList.length + this.baseFileList.length
				var _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						console.log(res)
						// _this.imgShow = res.tempFilePaths[0]
						uni.showLoading({
							title: "图片正在上传",
							mask: true
						})
						console.log(res.tempFilePaths[0])
						this.imgList.push(res.tempFilePaths[0]);
						console.log(this.imgList)
						// this.$set(this.imgList,0,res.tempFilePaths[0])
						this.$forceUpdate();
						uni.uploadFile({
							name: 'file',
							url: uni.url + "common/uploadFile",
							filePath: res.tempFilePaths[0],
							success: res => {
								this.num = this.imgList.length + this.baseFileList.length;
								this.imgShowList.push(JSON.parse(res.data).data);
								uni.hideLoading();
							}

						})
						// this.fileList = res.tempFilePaths

						// this.fileList.forEach((item) => {
						// 	console.log(item, "item")
						// 	pathToBase64(item)
						// 		.then(base64 => {
						// 			// _this.imgShow = base64
						// 			let baseImg = {
						// 				dataURL: base64, //用url方式表示的base64图片数据
						// 				type: 'image/jpeg' //文件类型
						// 			}
						// 			this.baseFileList.push(base64)
						// 			// this.baseArr.push(this.baseFileList)
						// 			var img = this.convertBase64UrlToBlob(baseImg)
						// 			imageConversion.compressAccurately(img, 500).then(res => {
						// 				let test = Symbol('test');
						// 				var name1 = test.toString().concat('.jpeg')
						// 				res = new File([res], name1, {
						// 					type: res.type,
						// 					lastModified: Date.now()
						// 				})
						// 				var form = new FormData();
						// 				form.append("file", res);
						// 				this.$http.post('common/uploadFile', form).then(
						// 					item => {
						// 						this.imgShowList.push(item.data.data)
						// 						uni.hideLoading()
						// 						this.$forceUpdate()
						// 					})
						// 			})
						// 			this.num = this.imgList.length + this.baseFileList.length
						// 		})
						// 		.catch(error => {
						// 			console.error(error)
						// 		})
						// })
						// this.baseFileList = this.baseFileList.slice(1)					

					}
				})
				console.log(this.baseArr, "arr")
				// this.baseArr.push(this.baseFileList)
			},
			leaveBtnFun() {
				uni.showLoading({
					title: '正在提交',
					mask: true
				})
				// classId,dormitoryId,studentNo,classPatrolJson,patrolType,describeTxt,
				// patrolImg,patrolStatus,dvType
				var classId = this.detailList.classId ? this.detailList.classId : ''
				var dormitoryId = this.detailList.dormitoryId ? this.detailList.dormitoryId : ''
				var studentNo = this.detailList.studentNo ? this.detailList.studentNo : ''
				var classPatrolJson = JSON.stringify(this.detailList.classPatrolJson ? this.detailList.classPatrolJson :
					'')

				var patrolImg = this.imgShowList.join(',')
				var reg = /,$/gi;
				patrolImg = patrolImg.replace(reg, "");
				console.log(patrolImg, "img")
				var status = 1
				if (this.detailList.patrolStatus == '优秀') {
					status = 1
				} else if (this.detailList.patrolStatus == '良好') {
					status = 2
				} else {
					status = 3
				}
				this.$api.duty.createOrUpdatePatroInAll(this.detailList.id, classId, dormitoryId, studentNo,
						classPatrolJson,
						this.detailList.patrolType, this.detailList.describeTxt, patrolImg, status, this.detailList.dvType)
					.then(res => {
						uni.showToast({
							title: "提交成功"
						})
						uni.hideLoading()
						setTimeout(() => {
							if (this.dutyType == 1) {
								uni.navigateTo({
									url: '/pages_main/dutyCheckWorkAttendance/dutySchoolList'
								})
								// this.attendanceArr[i].path = ''
							} else if (this.dutyType == 2) {
								uni.navigateTo({
									url: '/pages_main/dutyCheckWorkAttendance/dutyAfterClassList'
								})
								// this.attendanceArr[i].path = '/pages/dutyCheckWorkAttendance/dutyAfterClassList'
							} else if (this.dutyType == 3) {
								uni.navigateTo({
									url: '/pages_main/dutyCheckWorkAttendance/dutyClassList'
								})
								// this.attendanceArr[i].path = ''
							} else {
								uni.navigateTo({
									url: '/pages_main/dutyCheckWorkAttendance/dutyMoonAttendanceStatus'
								})
								// this.attendanceArr[i].path = ''
							}
						})
					})
			},
			callFun(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getDvDetailById() {
				if (this.imgShow == '') {
					uni.showLoading({
						mask: true
					})
				}
				this.$api.instructor.getDvDetailById(this.id).then(res => {
					this.detailList = res.data
					if (res.data.photo) {
						this.detailList.photo = 'data:image/gif;base64,' + res.data.photo
					} else {
						this.detailList.photo = null
					}
					if (res.data.fileImg) {
						this.detailList.fileImg =
							`${this.$baseAppUrl}common/downloadFileImg?filename=${res.data.fileImg}`
					} else {
						this.detailList.fileImg = null
					}
					if (this.dutyType == 3) {
						this.dvType = this.detailList.type
					} else {
						this.schoolDv.forEach((item) => {
							if (item.id == this.detailList.dvType) {
								this.dvType = item.title
							}

						})
					}
					uni.hideLoading();
					this.$forceUpdate()
				})
			}
		}
	}
</script>

<style>
	.del {
		width: 20rpx;
		height: 20rpx;
		/* border:#ff0000 solid 1rpx; */
		border-radius: 50%;
		color: red;
		font-size: 48rpx;
		font-weight: 700;
		position: relative;
		top: -5rpx;
		left: 160rpx;
		z-index: 999;
	}

	.imgDel {
		border: #ff0000 solid 1rpx;
	}

	.repDevice {
		text-align: left;
		font-size: 36rpx;
		color: #808080;
		padding-left: 45rpx;
	}

	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 590rpx;
		height: 300upx;
		margin: auto;
		padding: 10upx;
		margin-top: 0rpx
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50rpx;
		margin-bottom: -50rpx;
	}

	.leaveNav1 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 30%;
		padding: 10rpx 100rpx 40rpx 20rpx;
	}

	.violationLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30upx;
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 220upx;
		height: 70upx;
		color: white;
		font-size: 32rpx;
		font-weight: 0;
		line-height: 70rpx;
	}

	.attendanceLine {
		width: 600rpx;
		height: 2rpx;
		background-color: #8F8F94;
	}

	.displayStudentInfo {
		position: relative;
		top: 50rpx;
		left: 50rpx;

	}

	.dormitoryNav {
		color: #0000FF;
		margin-left: 80rpx;
		margin-top: 30rpx;


	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30upx;
	}
	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 580rpx;
		height: 300upx;
		margin: auto;
		padding: 10upx;
		margin-left: 0rpx;
		margin-top: 0rpx
	}
	.indexContent {
		height: 100vh;
	}
</style>
